<html>
<head>
<script type="text/javascript">
        var djConfig = {isDebug: true};
</script>
<script type="text/javascript" src="../../dojo.js"></script>
<script type="text/javascript">
	dojo.require("dojo.widget.LayoutContainer");
	dojo.require("dojo.widget.SplitContainer");
	dojo.require("dojo.widget.TabContainer");
	dojo.require("dojo.widget.AccordionContainer");
	dojo.require("dojo.widget.ContentPane");
	
	// Simple layout container layout
	var simpleLayout = {
		widgetType: "LayoutContainer",
		params: { widgetId: "rootWidget" },
		style: "border: 3px solid grey; width: 95%; height: 400px;",
		children: [
			{
				widgetType: "ContentPane",
				params: {widgetId: "left", layoutAlign: "left"},
				style: "width: 100px; background: #ffeeff;",
				innerHTML: "this is the left"
			},
			{
				widgetType: "ContentPane",
				params: {widgetId: "right", layoutAlign: "right"},
				style: "width: 100px; background: #ffeeff;",
				innerHTML: "this is the right"
			},
			{
				widgetType: "ContentPane",
				params: {widgetId: "top", layoutAlign: "top"},
				style: "height: 100px; background: #eeeeee;",
				innerHTML: "this is the top"
			},
			{
				widgetType: "ContentPane",
				params: {widgetId: "bottom", layoutAlign: "bottom"},
				style: "height: 100px; background: #eeeeee;",
				innerHTML: "this is the bottom"
			},
			{
				widgetType: "ContentPane",
				params: {widgetId: "client", layoutAlign: "client"},
				style: "height: 100px; background: #ffffee;",
				innerHTML: "this is the client"
			}
		]
	};
	
	// split container layout
	var splitLayout = {
		widgetType: "SplitContainer",
		params: {widgetId: "rootWidget", orientation: "horizontal"},
		style: "border: 3px solid grey; width: 95%; height: 400px;",
		children: [
			{
				widgetType: "ContentPane",
				params: {widgetId: "left"},
				style: "background: #ffeeff;",
				innerHTML: "left pane of split container"
			},
			{
				widgetType: "SplitContainer",
				params: {
					widgetId: "nested", orientation: "vertical"},
				children: [
					{
						widgetType: "ContentPane",
						params: {widgetId: "top"},
						style: "background: #eeffee;",
						innerHTML: "center-top pane of nested split container"
					},
					{
						widgetType: "ContentPane",
						params: {widgetId: "bottom"},
						style: "background: #eeffee;",
						innerHTML: "center-bottom pane of nested split container"
					}
				]
			},
			{
				widgetType: "ContentPane",
				params: {widgetId: "right"},
				style: "background: #ffeeff;",
				innerHTML: "right pane of split container"
			}
		]
	};
	
	// tab container layout
	var tabLayout = {
		widgetType: "TabContainer",
		params: {widgetId: "rootWidget"},
		style: "width: 95%; height: 400px;",
		children: [
			{
				widgetType: "ContentPane",
				params: {widgetId: "content", label: "Content tab", href: "doc0.html", executeScripts: true},
				style: "background: #ffeeff;"
			},
			{
				widgetType: "SplitContainer",
				params: {widgetId: "nestedSplit", label: "Split pane tab", orientation: "vertical"},
				children: [
					{
						widgetType: "ContentPane",
						params: {widgetId: "top"},
						style: "background: #eeffee;",
						innerHTML: "top pane of nested split container"
					},
					{
						widgetType: "ContentPane",
						params: {widgetId: "bottom"},
						style: "background: #eeffee;",
						innerHTML: "bottom pane of nested split container"
					}
				]
			},
			{
				widgetType: "TabContainer",
				params: {widgetId: "nestedTab", label: "Nested tabs"},
				children: [
					{
						widgetType: "ContentPane",
						params: {widgetId: "left", label: "Nested Tab #1"},
						style: "background: #eeffee;",
						innerHTML: "tab 1 of nested tabs"
					},
					{
						widgetType: "ContentPane",
						params: {
							widgetId: "right", label: "Nested Tab #2"},
						style: "background: #eeffee;",
						innerHTML: "tab 2 of nested tabs"
					}
				]
			}
		]
	};

	// tab container layout
	var tabNoLayout = {
		widgetType: "TabContainer",
		params: {widgetId: "rootWidget", doLayout: false},
		children: [
			{
				widgetType: "ContentPane",
				params: {widgetId: "doc0", label: "Doc 0", href: "doc0.html", executeScripts: true},
				style: "background: #ffeeff;"
			},
			{
				widgetType: "ContentPane",
				params: {widgetId: "doc1", label: "Doc 1", href: "doc1.html", executeScripts: true},
				style: "background: #eeffee;"
			},
			{
				widgetType: "ContentPane",
				params: {widgetId: "doc2", label: "Doc 2", href: "doc2.html", executeScripts: true},
				style: "background: #ffffee;"
			}
		]
	};
	
	// accordion container layout
	var accordionLayout = {
		widgetType: "AccordionContainer",
		params: {widgetId: "rootWidget"},
		style: "border: 3px solid grey; width: 95%; height: 400px;",
		children: [
			{
				widgetType: "ContentPane",
				params: {widgetId: "one", label: "Pane #1"},
				style: "background: #ffeeff;",
				innerHTML: "first pane contents"
			},
			{
				widgetType: "ContentPane",
				params: {widgetId: "two", label: "Pane #2"},
				style: "background: #ffeeff;",
				innerHTML: "second pane contents"
			},
			{
				widgetType: "ContentPane",
				params: {widgetId: "three", label: "Pane #3"},
				style: "background: #ffeeff;",
				innerHTML: "third pane contents"
			}
		]
	};

	// Create a widget hierarchy from a JSON structure like
	// {widgetType: "LayoutContainer", params: { ... }, children: { ... } }
	function createWidgetHierarchy(widgetJson){
		// setup input node
		var node = document.createElement("div");
		document.body.appendChild(node);	// necessary for tab contianer ???
		if(widgetJson.style){
			setCssText(node, widgetJson.style);
		}
		if(widgetJson.innerHTML){
			node.innerHTML=widgetJson.innerHTML;
		}
		
		// create the widget
		var widget = dojo.widget.createWidget(widgetJson.widgetType, widgetJson.params, node);
		
		// add it's children (recursively)
		if(widgetJson.children){
			dojo.lang.forEach(widgetJson.children, 
				function(child){ widget.addChild(createWidgetHierarchy(child)); });
		}
		
		return widget;
	}
	
	// set the cssText of a node
	function setCssText(node, cssText){
		// make opera sing
		if(dojo.lang.isUndefined(node.style.cssText)){
			node.setAttribute("style", cssText);
		}else{
			node.style.cssText= cssText;
		}
	}

	// create the widgets specified in layout and add them to widget "rootWidget"
	function create(layout){

		// erase old widget hierarchy (if it exists)
		var rootWidget = dojo.widget.byId("rootWidget");
		if(rootWidget){
			rootWidget.destroy();
		}
		
		// create new widget
		rootWidget = createWidgetHierarchy(layout);
		
		// and display it
		var wrapper = dojo.byId("wrapper");
		wrapper.innerHTML="";	// just to erase the initial HTML message
		wrapper.appendChild(rootWidget.domNode);
		rootWidget.onResized();
		
		// make/update the menu of operations on each widget
		makeOperationTable();
	}

	// write out a menu of operations on each widget
	function makeOperationTable(){
		var html = "<table border=1>";
		dojo.lang.forEach(dojo.widget.manager.getAllWidgets(), function(widget){
			html += "<tr><td>" + widget.widgetId + "</td><td>";
			html += "<button onclick='removeFromParent(\"" + widget.widgetId + "\");'> destroy </button> ";
			if(/Container/.test(widget.widgetType)){
				html += "<button onclick='addChild(\"" + widget.widgetId + "\");'> add a child </button> ";
			}
			html += "</td></tr>";
		});
		html += "</table>";
		dojo.byId("operations").innerHTML=html;
	}

	// remove a widget from it's parent and destroy it
	function removeFromParent(widget){
		widget = dojo.widget.byId(widget);
		if(widget.parent){
			widget.parent.removeChild(widget);
		}
		widget.destroy();
		
		// reset the operation table so this widget is no longer shown
		makeOperationTable();
	}

	// add a child to given widget
	function addChild(widget){
		widget = dojo.widget.byId(widget);

		// setup input node
		var node = document.createElement("div");
		setCssText(node, "height: 70px; width: 150px; overflow: auto; background: #cccccc; border: dotted black 2px;");	// necessary if parent is LayoutContainer
		
		// create the widget
		var alignments = ["top","bottom","left","right"];
		var hrefs = ["doc0.html", "doc1.html", "doc2.html"];
		var child = dojo.widget.createWidget(
			"ContentPane",
			{
				widgetId: "widget_" + cnt,
				label: "Widget " + cnt,	// necessary if parent is tab
				layoutAlign: alignments[cnt%4],	// necessary if parent is LayoutContainer
				executeScripts: true,
				href: hrefs[cnt%3]
			},
			node
		);
		cnt++;
		
		// add it to the parent
		widget.addChild(child);

		// reset the operation table so the new widget is shown
		makeOperationTable();
	}
	var cnt=1;
	
	// show a widget
	function show(widget){
		widget = dojo.widget.byId(widget);
		widget.show();
	}

	// hide a widget
	function hide(widget){
		widget = dojo.widget.byId(widget);
		widget.hide();
	}
</script>
<style>
	html, body {
		height: 100%;
		width: 100%;
	}
	#creator, #current {
		border: 3px solid blue;
		padding: 10px;
		margin: 10px;
	}
	#wrapper {
		border: 3px solid green;
		padding: 10px;
		margin: 10px;
	}
</style>
</head>
<body>
	<h1>Test of layout code programmatic creation</h1>
	<table width=100%>
		<tr>
			<td id="creator" valign=top>
				<h4>Creator</h4>
				<p>Pressing a button will programatically add a hierarchy of widgets</p>
				<button onClick="create(simpleLayout);">Simple Layout</button>
				<button onClick="create(splitLayout);">Split Layout</button>
				<button onClick="create(tabLayout);">Tab Layout</button>
				<button onClick="create(tabNoLayout);">Tab Non-Layout</button>
				<button onClick="create(accordionLayout);">Accordion Layout</button>
			</td>
			<td id="current">
				<h4>Current widgets</h4>
				This pane will let you try certain operations on each of the widgets.
				<div id="operations" style="height: 200px; overflow: auto;"></div>
			</td>
		</tr>
	</table>
	<hr>
	<div id="wrapper">
		When you press a button, this will be filled in with the generated widgets
	</div>
</body>
</html>
